<template>
	<view class="SingleUpload">
		<u-upload :fileList="fileList" @afterRead="onAfterRead" @delete="onDelete" :maxCount="1" :width="`${width}rpx`"
			:height="`${height}rpx`">
			<image :src="`${OnlineStatic}${img}`"
				:style="{width: `${width}rpx`,height: `${height}rpx`,borderRadius: `${borderRadius}rpx`}">
			</image>
		</u-upload>
	</view>
</template>

<script>
	import { OnlineStatic } from "@/api/index"
	import { singleUpload } from "@/utils/index"
	export default {
		props: {
			width: {
				type: Number,
				default: 630
			},
			height: {
				type: Number,
				default: 426
			},
			borderRadius: {
				type: Number,
				default: 0
			},
			img: {
				type: String,
				default: 'zheng.png'
			},
			fileListData: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				fileList: [],
				OnlineStatic
			}
		},
		watch: {
			fileListData(value) {
				if(value) this.fileList = [{ url: value }]
			}
		},
		methods: {
			async onAfterRead(e) {
				console.log(e.file)
				const res = await singleUpload(e.file.url, 6)
				console.log('res', res)
				this.fileList = [{ url: res.imgURL }]
				this.$emit('afterRead', res.imgURL)
			},
			onDelete() {
				this.fileList = []
				this.$emit('delete')
			}
		}
	}
</script>

<style lang="scss">
	::v-deep.SingleUpload {
		.u-upload__wrap__preview {
			margin: 0 !important;
		}
	}
</style>